<template>
	<view class="root">
		<!-- 使用 common-title 组件 -->
		<view class="title-bar">
			<common-title :title="pageTitle" :showBack="false"></common-title>
			<view class="top-right" style="background-color: '#0F6AF8';">
				<image src="/static/icon_send.png"></image>
				<view @click="jumpPublishPage()">发布消息</view>

			</view>
		</view>


		<scroll-view scroll-y="true" class="scroll-Y" v-if="!DataUtils.isEmpty(newList)" refresher-enabled="true"
			:refresher-triggered="triggeredRef" :refresher-threshold="100" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
			<uni-list :border="false">
				<view v-for="(item, index) in newList" :key="index" class="news-item">

					<view class="news-index">{{index+1}}</view>
					<view class="news-title">{{item.name}}</view>
					<view class="news-type">{{item.messageTypeName}}</view>
					<view class="news-media">{{item.messageFormatName}}</view>
					<view class="news-date">{{item.reminderTime}}</view>
					<view class="news-operate">

						<view class="news-publish" @click="pushMessage(item)">发布</view>
						<view class="news-detail" @click="jumpDetailPage(item)">详情</view>
						<view class="news-delete" @click="deleteMessage(item)">删除</view>
					</view>

				</view>

			</uni-list>

		</scroll-view>

		<scroll-view scroll-y="true" class="scroll-Y" refresher-enabled="true" :refresher-triggered="triggeredRef"
			:refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @refresherabort="onAbort" v-else>
			<NoData></NoData>
		</scroll-view>



		<!-- 提示窗示例 -->
		<uni-popup ref="aleartPopRef" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提示" :content="alertContent"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script setup>
	import * as httpConfig from "../../common/http-config.js";
	import * as DataUtils from "../../utils/DataUtils";
	import CommonTitle from '@/components/common-title.vue';
	import NoData from '@/components/no-data.vue';
	import {
		onLoad,
		onShow,
		onHide
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		onUnmounted,
		computed,
		defineComponent,
		getCurrentInstance,
		reactive

	} from 'vue'
	// 使用 onMounted 钩子自动播放视频
	// 获取当前组件实例
	const instance = getCurrentInstance()
	// 初始化信息
	const initInfo = ref(null)
	const pageTitle = ref("消息列表")

	const alertContent = ref("")

	const triggeredRef = ref(true)

	const onPulling = (e) => {
		console.log("onPulling")

	}
	const onRefresh = () => {
		console.log("onRefresh")
		triggeredRef.value = true; // 开始刷新
		messageReminderList()
	}

	const onRestore = () => {
		console.log("onRestore")
	}

	const onAbort = () => {
		console.log("onAbort")
	}


	onMounted(() => {


	});
	onUnmounted(() => {
		console.log("new list onUnmounted.......")


	});

	onShow(() => {
		console.log("onShow...")
		if (instance?.proxy?.$globalData?.initInfo) {
			let jsonStr = instance.proxy.$globalData.initInfo;
			console.log("onMounted jsonStr = " + jsonStr)
			initInfo.value = JSON.parse(jsonStr)
			console.log("onMounted initInfo = " + initInfo.value)

		}
		messageReminderList()
	})
	onHide(() => {
		console.log("onHide...")

	})




	// 使用 ref 函数创建引用变量
	const aleartPopRef = ref(null)
	const selectItem = ref(null)
	const operationType = ref(0) //1发布 2 删除
	const jumpPublishPage = () => {
		uni.navigateTo({
			url: 'news-publish-page'
		});
	}
	// 消息详情
	const jumpDetailPage = (item) => {
		uni.navigateTo({
			url: 'news-detail-page?id=' + item.id
		});
	}
	// 发布消息
	const pushMessage = (item) => {
		selectItem.value = item
		operationType.value = 1
		alertContent.value = "是否确认发布?"
		aleartPopRef.value.open()
	}

	// 删除消息
	const deleteMessage = (item) => {
		operationType.value = 2
		selectItem.value = item
		alertContent.value = "是否确认删除?"
		aleartPopRef.value.open()
	}

	const dialogConfirm = () => {
		aleartPopRef.value.close()
		// 发布消息
		if (operationType.value == 1) {
			messageReminderPush(selectItem.value.id)

		}
		// 删除消息
		if (operationType.value == 2) {
			messageReminderDelete(selectItem.value.id)
		}
	}
	const dialogClose = () => {
		aleartPopRef.value.close()
	}
	// 发布消息
	const messageReminderPush = (id) => {
		uni.showLoading({
			title: "请稍后..."
		})
		let data = {
			"id": id
		}
		uni.request({
			url: httpConfig.baseURL + httpConfig.messageReminderPush, //
			method: 'POST', // 请求方法为 POST
			data: data,
			success: (res) => {
				uni.hideLoading()
				if (res.data.code == httpConfig.successCode) {
					uni.showToast({
						title: "发布成功",
						icon: "success",
						duration: 2000
					});
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "error",
						duration: 2000
					});
				}
				// 在这里处理请求成功的情况
			},
			fail: (err) => {
				uni.hideLoading()
				uni.showToast({
					title: "发布消息失败" + err,
					icon: "success",
					duration: 2000
				});
				// 在这里处理请求失败的情况
			}
		});

	}
	// 删除
	const messageReminderDelete = (id) => {
		uni.showLoading({
			title: "请稍后..."
		})
		let data = {
			"id": id
		}
		uni.request({
			url: httpConfig.baseURL + httpConfig.messageReminderDelete, //
			method: 'POST', // 请求方法为 POST
			data: data,
			success: (res) => {
				uni.hideLoading()
				if (res.data.code == httpConfig.successCode) {
					uni.showToast({
						title: "删除成功",
						icon: "success",
						duration: 2000
					});
					messageReminderList()
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "success",
						duration: 2000
					});
				}
				// 在这里处理请求成功的情况
			},
			fail: (err) => {
				uni.hideLoading()
				console.error('messageReminderDelete fail ');
				uni.showToast({
					title: "删除消息失败" + err,
					icon: "success",
					duration: 2000
				});
				// 在这里处理请求失败的情况
			}
		});

	}
	const newList = ref([])
	//  分页获取消息提醒列表
	const messageReminderList = () => {
		console.log("messageReminderList")
		let data = {
			"currentPage": 1,
			"pageSize": 50
		}
		uni.request({
			url: httpConfig.baseURL + httpConfig.messageReminderList, // 消息列表
			method: 'POST', // 请求方法为 POST
			data: data,
			success: (res) => {
				triggeredRef.value = false;
				if (res.data.code == httpConfig.successCode) {
					newList.value = res.data.data["items"]
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "success",
						duration: 2000
					});
				}
				// 在这里处理请求成功的情况
			},
			fail: (err) => {
				triggeredRef.value = false;
				console.error('messageReminderList fail ');
				uni.showToast({
					title: "获取消息失败" + err,
					icon: "success",
					duration: 2000
				});
				// 在这里处理请求失败的情况
			}
		});




	}
</script>

<style lang="less" scoped>
	@vw: 8.015vw;
	@vh: 5.4vh;

	.root {
		height: 100vh;
		/* 页面高度为 100% */
		overflow: hidden;
		/* 禁止页面滚动 */
		display: flex;
		flex-direction: column;

		.title-bar {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.top-right {
				width: 92/@vw;
				height: 32/@vh;
				border-radius: 3/@vh;
				background-color: #0F6AF8;
				margin-right: 16/@vw;
				font-size: 13/@vh;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					margin-right: 2/@vw;
					width: 14/@vw;
					height: 14/@vh;
				}
			}
		}

		scroll-view {
			height: 100%;


			.news-item {
				height: 40/@vh;
				background-color: white;
				border: 0.5/@vh solid #D0D6DE;
				border-radius: 2/@vh;
				color: #2C2E30;
				margin-top: 7/@vh;
				margin-left: 12/@vw;
				margin-right: 12/@vw;
				font-size: 13/@vh;
				display: flex;
				flex-direction: row;
				align-items: center;


				.news-index {
					flex: 1;
					margin-left: 16/@vw;
				}

				.news-title {
					flex: 3;
				}

				.news-type {
					flex: 2.5;
				}

				.news-media {
					flex: 2.5;
				}

				.news-date {
					flex: 4;
				}

				.news-operate {
					flex: 3;
					display: flex;
					flex-direction: row;
					color: #0F6AF8;

					.news-publish {
						flex: 1;

						display: flex;
						flex-direction: row;
						justify-content: center;
					}

					.news-detail {
						flex: 1;

						display: flex;
						flex-direction: row;
						justify-content: center;
					}

					.news-delete {
						flex: 1;

						display: flex;
						flex-direction: row;
						justify-content: center;
					}
				}




			}
		}

	}
</style>